<template>
    <div>
        <breadcrumb :routerList="routerList"></breadcrumb>
        <div class="box">
            <el-row type="flex" :gutter="20">
                <el-col :span="8">
                    <time-pick @timeArr="timeArrFun"></time-pick>
                </el-col>
                <el-col :span="4">
                    <select-normal placeholderText="请选择类型" :selData="selData" @selectVal="selectVal"></select-normal>
                </el-col>
                <el-col :span="4">
                    <el-input placeholder="请输入ID" v-model="sonId" clearable></el-input>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" icon="el-icon-search" @click="searchBtn">检索</el-button>
                    <el-button type="primary" icon="el-icon-download" @click="downLoad">导出</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table
                :data="shareData"
                border
                style="width: 100%"
                :height="getWinHeight"
        >
            <el-table-column
                    label="分享信息"
                    width="400"
                    align="center"
                    v-if="shareType==1"
            >
                <template scope="scope">
                    <div class="flex-row">
                        <img :src="scope.row.head_img" alt="" class="img-style">
                        <div class="ml10">{{scope.row.product_name}}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    label="分享信息"
                    width="400"
                    align="center"
                    v-if="shareType==2"
            >
                <template scope="scope">
                    <div class="flex-row">
                        <img :src="scope.row.head_img" alt="" class="img-style">
                        <div class="ml10">{{scope.row.shop_name}}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    label="分享信息"
                    width="400"
                    align="center"
                    v-if="shareType==3"
            >
                <template scope="scope">
                    <div class="flex-row">
                        <img :src="scope.row.supplier_img" alt="" class="img-style">
                        <div class="ml10">{{scope.row.supplier_name}}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="nickname"
                    label="分享用户"
                    align="center"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="date"
                    align="center"
                    label="分享时间">
            </el-table-column>
        </el-table>
        <pagination :total="dataTotal" @currentPage="currentPage" @sizeChange="sizeChange"></pagination>
    </div>
</template>

<script>
    import breadcrumb from "@/components/breadcrumb.vue"
    import pagination from "@/components/paginationSizeChange.vue"
    import timePick from "@/components/timePick.vue"
    import selectNormal from '@/components/selectNormal.vue'

    export default {
        name: "shareData",
        components:{breadcrumb,pagination,timePick,selectNormal},
        data(){
            return {
                routerList:[
                    {
                        path:'',
                        name:'数据分析'
                    },
                    {
                        path:'/shareData',
                        name:'分享数据统计'
                    }
                ],
                selData:[
                    {
                        label:'商品',
                        value:'1'
                    },
                    {
                        label:'个人店铺',
                        value:'2'
                    },
                    {
                        label:'供货商店铺',
                        value:'3'
                    }
                ],
                shareData:[],
                page:1,
                num:this.$store.state.pageNum,
                timeArr:[],
                shareType:1,//1商品  2店铺
                dataTotal:0,
                sonId:''//商品Id  或者  店铺Id
            }
        },
        created(){
          this.getShareData()
        },
        computed:{
            getWinHeight(){
                let winHeight = document.body.clientHeight;
                return winHeight - 260
            }
        },
        methods:{
            currentPage(page){
                // console.log(page);
                this.page = page;
                this.getShareData();
            },
            sizeChange(num){
                this.num = num;
                this.getShareData();
            },
            selectVal(val){
                // console.log(val);
                this.shareType = val;
                this.getShareData();
            },
            timeArrFun(time){
                // console.log(time);
                this.timeArr = time;
                this.getShareData();
            },
            async getShareData(){
                let res = await this.$Http.getShareData({
                    p:this.page,
                    num:this.num,
                    start_time:this.timeArr[0],
                    end_time:this.timeArr[1],
                    son_id:this.sonId,
                    type:this.shareType
                })
                console.log(res);
                if(res.list){
                    this.shareData = res.list;
                    this.dataTotal = Number(res.count)
                }
            },
            searchBtn(){
                this.getShareData();
            },
            downLoad(){
                let tableName = `分享数据表格${this.timeArr.length==0?'':this.$util.timestampToDate(this.timeArr[0]) + '-' + this.$util.timestampToDate(this.timeArr[1])}`
                let tableHeader = ['分享信息','分享用户','分享时间'];
                let data = [];
                let list = this.shareData;
                for(let i in list){
                    let arr = [];
                    if(this.shareType == 1){
                        arr.push(list[i].product_name,list[i].nickname,list[i].date)
                    }else if(this.shareType == 2){
                        arr.push(list[i].supplier_name,list[i].nickname,list[i].date)
                    }
                    data.push(arr);
                }
                // console.log(tableHeader,tableName,data);
                this.$util.exportExcel01(tableHeader,tableName,data)
            }
        }
    }
</script>

<style scoped>
    .flex-row{
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }
    .img-style{
        width:50px;
    }
</style>
